<template>
	<view class="music-player">
		<!-- 自定义头部组件 -->
		<UAMHeader :title="songInfo?.name || '未知歌曲'"></UAMHeader>

		<!-- 歌词全屏显示 -->
		<view v-if="showLyric" class="lyric-fullscreen" @click="toggleLyricDisplay">
			<scroll-view class="lyric" scroll-y style="height: 100vh;">
				<view class="wrap" :style="{ transform: `translateY(${calcLyricTranslate()}rpx)` }">
					<view v-for="(line, index) in lyricLines" :key="index" :class="{'active': index === currentLyricIndex, 'near-active': Math.abs(index - currentLyricIndex) <= 2}" class="item">{{ line.text }}</view>
				</view>
			</scroll-view>
		</view>

		<!-- 主内容区域 -->
		<view v-else class="main-content">
			<!-- 专辑封面区域 -->
			<view class="album-container">
				<view class="album-cover" :style="{ transform: `rotate(${rotationDegree}deg)` }" @click="togglePlay">
					<image class="disc-bg" src="/static/disc.png" mode="aspectFit"></image>
					<image :src="songInfo?.al?.picUrl || 'https://picsum.photos/400/400'" mode="aspectFit"></image>
					<view class="play-icon" v-if="!isPlaying">
						<text class="iconfont icon-bofang1"></text>
					</view>
				</view>
				<image class="needle" :class="{ paused: !isPlaying }" src="/static/needle.png" mode="aspectFit"></image>
			</view>

			<!-- 歌曲信息 -->
			<view class="song-info">
				<view class="song-name">{{ songInfo?.name || '未知歌曲' }}</view>
				<view class="song-artist">{{ formatArtists(songInfo?.ar) || '未知艺术家' }}</view>
			</view>

			<!-- 歌词区域 -->
			<scroll-view class="lyric" scroll-y :style="{ height: showLyric ? '500rpx' : '300rpx' }" @click="toggleLyricDisplay">
				<view class="wrap" :style="{ transform: `translateY(${calcLyricTranslate()}rpx)` }">
					<view v-for="(line, index) in lyricLines" :key="index" :class="{'active': index === currentLyricIndex, 'near-active': Math.abs(index - currentLyricIndex) <= 2}" class="item">{{ line.text }}</view>
				</view>
			</scroll-view>
		</view>

		<!-- 播放进度 -->
		<view class="progress-container">
			<view class="time-display">{{ currentTime }}</view>
			<view class="progress-slider" @touchstart="onProgressTouchStart" @touchmove="onProgressTouchMove" @touchend="onProgressTouchEnd">
				<view class="progress-track"></view>
				<view class="progress-fill" :style="{ width: progress + '%' }"></view>
				<view class="progress-thumb" :style="{ left: progress + '%' }"></view>
			</view>
			<view class="time-display">{{ duration }}</view>
		</view>

		<!-- 播放控制 -->
		<view class="control-container">
			<view class="control-btn" @click="toggleShuffle">
				<text class="iconfont icon-fenxiang" :class="{ 'active': shuffleMode }"></text>
			</view>
			<view class="control-btn" @click="playPrev" :class="{ disabled: !hasPrev }">
				<text class="iconfont icon-shangyishoushangyige"></text>
			</view>
			<view class="control-btn play-btn" @click="togglePlay">
				<text class="iconfont" :class="isPlaying ? 'icon-zanting' : 'icon-bofang1'"></text>
			</view>
			<view class="control-btn" @click="playNext" :class="{ disabled: !hasNext }">
				<text class="iconfont icon-xiayigexiayishou"></text>
			</view>
			<view class="control-btn" @click="showPlaylist">
				<text class="iconfont icon-mulu"></text>
				<text>{{ trackIds?.length || 0 }}</text>
			</view>
		</view>

		<!-- 播放列表按钮 -->
		
		<!-- 加载状态 -->
		<view v-if="loading" class="loading-mask">
			<view class="loading-spinner">
				<text class="iconfont icon-bofang2"></text>
			</view>
		</view>

		<!-- 错误提示 -->
		<view v-if="errorMsg" class="error-message">
			<text>{{ errorMsg }}</text>
		</view>

		<!-- 添加播放列表抽屉组件 -->
		<view class="playlist-drawer" :class="{ 'show': showPlaylistDrawer }">
			<view class="playlist-mask" @click="togglePlaylistDrawer"></view>
			<view class="playlist-drawer-content">
				<view class="playlist-header">
					<text class="playlist-title">播放列表 ({{ trackIds?.length || 0 }}首)</text>
					<view class="close-btn" @click="togglePlaylistDrawer">
						<text class="iconfont icon-shanchu"></text>
					</view>
				</view>
				<scroll-view class="playlist-scroll" scroll-y>
					<view 
						v-for="(id, index) in trackIds" 
						:key="id" 
						class="playlist-item"
						:class="{ 'current': index === currentIndex }"
						@click="playSongAtIndex(index)">
						<text class="playlist-index">{{ index + 1 }}</text>
						<view class="playlist-song-info">
							<text class="playlist-song-name">{{ getSongName(id) }}</text>
							<text class="playlist-song-artist">{{ getSongArtist(id) }}</text>
						</view>
						<view class="playing-indicator" v-if="index === currentIndex">
							<text class="iconfont icon-bofang1" v-if="!isPlaying"></text>
							<view class="wave-animation" v-else>
								<view class="wave-bar"></view>
								<view class="wave-bar"></view>
								<view class="wave-bar"></view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		songUrl,
		songDetail,
		songLyric
	} from '@/common/api.js';

	export default {
		data() {
			return {
				songId: null,
				trackIds: null,
				currentIndex: 0,
				songUrl: null,
				innerAudioContext: null,
				loading: false,
				errorMsg: null,
				songInfo: null,
				isPlaying: false,
				currentTime: '00:00',
				duration: '00:00',
				progress: 0,
				progressTimer: null,
				loopMode: 0, // 0: 列表循环, 1: 单曲循环, 2: 随机播放
				shuffleMode: false,
				shuffledTrackIds: [],
				// 歌词相关
				lyric: '',
				lyricLines: [],
				currentLyricIndex: -1,
				lyricTransform: 'translateY(0)',
				showLyric: false,
				lyricHeight: 0,
				lineHeight: 0,
				rotationDegree: 0,
				rotationTimer: null,
				showPlaylistDrawer: false,
				// 歌曲信息缓存
				songsCache: {},
				isDragging: false,
				progressSliderWidth: 0,
				progressSliderLeft: 0,
			};
		},

		computed: {
			hasPrev() {
				return this.getPlayableTracks().length > 1;
			},

			hasNext() {
				return this.getPlayableTracks().length > 1;
			},

			currentTrackId() {
				const tracks = this.getPlayableTracks();
				return tracks[this.currentIndex] || null;
			},
		},

		onLoad(options) {
			console.log('接收到的参数：', options);

			if (options.ids) {
				try {
					this.trackIds = JSON.parse(decodeURIComponent(options.ids));
					console.log('解析后的多首歌曲ID列表：', this.trackIds);
					this.initPlayback();
				} catch (error) {
					console.error('解析多首歌曲ID列表出错:', error);
					this.errorMsg = '解析歌曲列表失败';
				}
			} else if (options.id) {
				const songId = Number(options.id);
				if (!isNaN(songId)) {
					this.songId = songId;
					this.trackIds = [songId];
					console.log('单首歌曲ID：', this.songId);
					this.initPlayback();
				} else {
					console.error('无效的单首歌曲ID:', options.id);
					this.errorMsg = '无效的歌曲ID';
				}
			}
		},

		onReady() {
			// 等待组件渲染完成后再进行测量
			setTimeout(() => {
				const query = uni.createSelectorQuery().in(this);
				
				query.select('.lyric-content').boundingClientRect(rect => {
					if (rect) {
						console.log('歌词容器高度:', rect.height);
						this.lyricHeight = rect.height;
					}
				}).exec();
				
				query.select('.lyric-line').boundingClientRect(rect => {
					if (rect) {
						console.log('歌词行高:', rect.height);
						this.lineHeight = rect.height || 80; // 默认行高增加到80rpx
					}
				}).exec();
			}, 500);
		},

		onUnload() {
			this.releaseAudioContext();
			this.stopRotation();
		},

		methods: {
			// 初始化播放
			initPlayback() {
				if (this.trackIds && this.trackIds.length > 0) {
					this.currentIndex = 0;
					this.fetchSongData(this.currentTrackId);
				}
			},

			// 获取当前播放列表（考虑随机播放模式）
			getPlayableTracks() {
				return this.shuffleMode && this.shuffledTrackIds.length > 0 ?
					this.shuffledTrackIds :
					this.trackIds || [];
			},

			// 随机打乱播放列表
			shuffleTracks() {
				if (!this.trackIds || this.trackIds.length <= 1) return;

				// 复制原始列表
				this.shuffledTrackIds = [...this.trackIds];

				// Fisher-Yates 洗牌算法
				for (let i = this.shuffledTrackIds.length - 1; i > 0; i--) {
					const j = Math.floor(Math.random() * (i + 1));
					[this.shuffledTrackIds[i], this.shuffledTrackIds[j]] = [this.shuffledTrackIds[j], this.shuffledTrackIds[i]
						];
				}

				// 确保当前播放歌曲在打乱后的列表中的位置不变
				const currentId = this.trackIds[this.currentIndex];
				const newIndex = this.shuffledTrackIds.indexOf(currentId);
				if (newIndex !== -1 && newIndex !== this.currentIndex) {
					// 将当前播放歌曲移到新列表的相同位置
					this.shuffledTrackIds.splice(newIndex, 1);
					this.shuffledTrackIds.splice(this.currentIndex, 0, currentId);
				}
			},

			// 获取歌曲详细信息和URL
			async fetchSongData(id) {
				this.loading = true;
				this.errorMsg = null;

				try {
					// 并行请求歌曲详情、URL和歌词
					const [detailRes, urlRes, lyricRes] = await Promise.all([
						songDetail(id),
						songUrl(id),
						songLyric(id)
					]);

					console.log('歌曲详情响应:', detailRes);
					console.log('歌曲URL响应:', urlRes);
					console.log('歌词响应:', lyricRes);

					// 处理歌曲详情
					if (detailRes.data.code === 200 && detailRes.data.songs && detailRes.data.songs.length > 0) {
						this.songInfo = detailRes.data.songs[0];
						// 缓存歌曲信息
						this.songsCache[id] = {
							name: this.songInfo.name,
							artist: this.formatArtists(this.songInfo.ar)
						};
					} else {
						throw new Error('获取歌曲详情失败: ' + (detailRes.data.message || '未知错误'));
					}

					// 处理歌曲URL
					if (urlRes.data.code === 200 && urlRes.data.data && urlRes.data.data.length > 0) {
						const songData = urlRes.data.data[0];
						this.songUrl = songData.url;

						if (!this.songUrl) {
							throw new Error('获取到的歌曲URL为空');
						}
					} else {
						throw new Error('获取歌曲URL失败: ' + (urlRes.data.message || '未知错误'));
					}

					// 处理歌词
					if (lyricRes.data.code === 200 && lyricRes.data.lrc) {
						this.lyric = lyricRes.data.lrc.lyric;
						this.parseLyric();
					} else {
						this.lyric = '';
						this.lyricLines = [];
						console.warn('获取歌词失败或无歌词');
					}

					this.initAudioContext();
				} catch (error) {
					console.error('获取歌曲数据出错:', error);
					this.errorMsg = error.message || '获取歌曲信息失败';
				} finally {
					this.loading = false;
				}
			},

			// 解析歌词
			parseLyric() {
				if (!this.lyric) {
					this.lyricLines = [{
						time: 0,
						text: '暂无歌词'
					}];
					return;
				}

				const lines = this.lyric.split('\n');
				const lyricLines = [];

				// 正则表达式匹配时间标签和歌词文本
				const timeRegex = /\[(\d{2}):(\d{2})\.(\d{2,3})\]/;

				lines.forEach(line => {
					if (!line.trim()) return;

					// 检查是否包含时间标签
					const timeMatches = line.match(timeRegex);
					if (timeMatches) {
						const minutes = parseInt(timeMatches[1]);
						const seconds = parseInt(timeMatches[2]);
						// 确保毫秒部分为三位（例如，"01"转为10，"123"保持123）
						const msStr = timeMatches[3].padEnd(3, '0').substring(0, 3);
						const milliseconds = parseInt(msStr);

						// 计算总毫秒数
						const time = minutes * 60 * 1000 + seconds * 1000 + milliseconds;

						// 提取歌词文本
						const text = line.replace(timeRegex, '').trim();

						if (text) {
							lyricLines.push({
								time,
								text
							});
						}
					} else if (line.trim()) {
						// 处理没有时间标签的歌词行
						lyricLines.push({
							time: lyricLines.length > 0 ? lyricLines[lyricLines.length - 1].time : 0,
							text: line.trim()
						});
					}
				});

				// 按时间排序
				lyricLines.sort((a, b) => a.time - b.time);

				this.lyricLines = lyricLines;

				// 输出歌词到控制台（格式：{time: 秒数, lyric: 歌词内容}）
				this.lyricLines.forEach(item => {
					console.log({
						time: item.time / 1000, // 毫秒转秒
						lyric: item.text
					});
				});
			},

			// 更新当前播放的歌词行
			updateCurrentLyric() {
				if (!this.lyricLines.length || !this.innerAudioContext) return;
				
				const currentTime = this.innerAudioContext.currentTime * 1000; // 转换为毫秒
				
				// 查找当前时间对应的歌词行
				let foundIndex = -1;
				
				// 方法1：查找当前时间小于的第一个歌词时间点的前一个歌词
				for (let i = 0; i < this.lyricLines.length; i++) {
					// 如果当前歌词时间大于播放时间，那么前一句就是要显示的歌词
					if (this.lyricLines[i].time > currentTime) {
						foundIndex = i - 1;
						break;
					}
				}
				
				// 如果没找到并且已经开始播放，那么显示最后一句歌词
				if (foundIndex === -1 && currentTime > 0 && this.lyricLines.length > 0) {
					// 如果已经超过了最后一句歌词的时间，显示最后一句
					if (currentTime >= this.lyricLines[this.lyricLines.length - 1].time) {
						foundIndex = this.lyricLines.length - 1;
					} 
					// 如果还没到第一句歌词的时间，显示第一句
					else if (currentTime < this.lyricLines[0].time) {
						foundIndex = 0;
					}
				}
				
				// 只有在索引变化时才更新
				if (foundIndex !== this.currentLyricIndex && foundIndex >= 0) {
					console.log(`time: ${currentTime}ms, lyrlc[${foundIndex}]: ${this.lyricLines[foundIndex].text}`);
					this.currentLyricIndex = foundIndex;
				}
			},

			// 切换歌词显示状态
			toggleLyricDisplay() {
				this.showLyric = !this.showLyric;
			},

			// 初始化音频上下文
			initAudioContext() {
				if (this.innerAudioContext) {
					try {
						this.innerAudioContext.pause();
						this.innerAudioContext.destroy();
					} catch (e) {
						console.error('销毁音频实例失败:', e);
					}
				}
				
				this.innerAudioContext = uni.createInnerAudioContext();
				this.innerAudioContext.src = this.songUrl;
				this.innerAudioContext.autoplay = false;
				
				this.innerAudioContext.onPlay(() => {
					console.log('开始播放');
					this.isPlaying = true;
					this.updateProgress();
					this.startRotation();
				});
				
				this.innerAudioContext.onPause(() => {
					console.log('暂停播放');
					this.isPlaying = false;
					this.clearProgressTimer();
					this.stopRotation();
				});

				this.innerAudioContext.onStop(() => {
					console.log('停止播放');
					this.resetProgress();
				});

				this.innerAudioContext.onEnded(() => {
					console.log('播放结束');
					this.resetProgress();

					// 根据循环模式处理下一首
					if (this.loopMode === 1) {
						// 单曲循环，重新播放当前歌曲
						this.innerAudioContext.seek(0);
						this.innerAudioContext.play();
					} else {
						// 列表循环或随机播放
						this.playNext();
					}
				});

				this.innerAudioContext.onError((res) => {
					console.error('播放错误:', res.errMsg, res.errCode);
					this.errorMsg = `播放错误: ${res.errMsg} (${res.errCode})`;

					if (res.errCode === -99) {
						this.errorMsg += ' - 尝试重新创建音频实例';
						setTimeout(() => this.initAudioContext(), 500);
					} else if (res.errCode === -100) {
						this.errorMsg += ' - 请检查网络连接';
					} else if (res.errCode === 404) {
						this.errorMsg += ' - 歌曲资源不存在';
					}
				});

				this.innerAudioContext.onCanplay(() => {
					setTimeout(() => {
						const duration = this.innerAudioContext.duration || 0;
						this.duration = this.formatTime(duration);
					}, 500);
				});
			},

			// 释放音频上下文资源
			releaseAudioContext() {
				if (this.innerAudioContext) {
					try {
						this.innerAudioContext.pause();
						this.innerAudioContext.offPlay();
						this.innerAudioContext.offPause();
						this.innerAudioContext.offStop();
						this.innerAudioContext.offEnded();
						this.innerAudioContext.offError();
						this.innerAudioContext.offCanplay();
						this.innerAudioContext.destroy();
						this.innerAudioContext = null;
					} catch (e) {
						console.error('释放音频资源失败:', e);
					}

					this.clearProgressTimer();
					this.resetProgress();
				}
			},

			// 开始旋转动画
			startRotation() {
				if (this.rotationTimer) {
					clearInterval(this.rotationTimer);
				}
				
				this.rotationTimer = setInterval(() => {
					this.rotationDegree = (this.rotationDegree + 1) % 360;
				}, 50); // 每50毫秒旋转1度，大约18秒一圈
			},
			
			// 停止旋转动画
			stopRotation() {
				if (this.rotationTimer) {
					clearInterval(this.rotationTimer);
					this.rotationTimer = null;
				}
			},
			
			// 播放控制
			togglePlay() {
				if (!this.innerAudioContext) return;
				
				if (this.isPlaying) {
					this.innerAudioContext.pause();
					this.stopRotation();
				} else {
					this.innerAudioContext.play();
					this.startRotation();
				}
				
				this.isPlaying = !this.isPlaying;
			},

			playPrev() {
				const tracks = this.getPlayableTracks();
				if (tracks.length <= 1) return;

				this.currentIndex = (this.currentIndex - 1 + tracks.length) % tracks.length;
				this.fetchSongData(tracks[this.currentIndex]);
			},

			playNext() {
				const tracks = this.getPlayableTracks();
				if (tracks.length <= 1) return;

				if (this.loopMode === 2 && this.shuffleMode) {
					// 随机播放模式下随机选择下一首
					let nextIndex;
					do {
						nextIndex = Math.floor(Math.random() * tracks.length);
					} while (nextIndex === this.currentIndex && tracks.length > 1);

					this.currentIndex = nextIndex;
				} else {
					// 顺序播放
					this.currentIndex = (this.currentIndex + 1) % tracks.length;
				}

				this.fetchSongData(tracks[this.currentIndex]);
			},

			// 切换循环模式
			toggleLoop() {
				this.loopMode = (this.loopMode + 1) % 3;
			},

			// 切换随机播放
			toggleShuffle() {
				this.shuffleMode = !this.shuffleMode;

				if (this.shuffleMode) {
					this.shuffleTracks();
				} else {
					// 恢复原始顺序
					if (this.trackIds && this.shuffledTrackIds.length > 0) {
						const currentId = this.currentTrackId;
						this.currentIndex = this.trackIds.indexOf(currentId);
					}
				}
			},

			// 进度更新方法
			updateProgress() {
				if (!this.innerAudioContext || this.innerAudioContext.paused) return;

				const duration = this.innerAudioContext.duration || 0;
				const currentTime = this.innerAudioContext.currentTime || 0;

				if (duration > 0) {
					this.progress = Math.min(100, (currentTime / duration) * 100);
					this.currentTime = this.formatTime(currentTime);

					// 更新当前歌词
					this.updateCurrentLyric();
				}

				this.progressTimer = setTimeout(() => {
					this.updateProgress();
				}, 100); // 每100ms更新一次，提高歌词同步精度
			},

			resetProgress() {
				this.progress = 0;
				this.currentTime = '00:00';
				this.isPlaying = false;
				this.currentLyricIndex = -1;
				this.lyricTransform = 'translateY(0)';
				this.clearProgressTimer();
			},

			clearProgressTimer() {
				if (this.progressTimer) {
					clearTimeout(this.progressTimer);
					this.progressTimer = null;
				}
			},

			// 格式化艺术家列表
			formatArtists(artists) {
				if (!artists || artists.length === 0) return '未知艺术家';
				return artists.map(artist => artist.name).join(' / ');
			},

			// 格式化时间
			formatTime(seconds) {
				const minutes = Math.floor(seconds / 60);
				const secs = Math.floor(seconds % 60);
				return `${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
			},

			// 显示播放列表（示例方法）
			showPlaylist() {
				this.showPlaylistDrawer = true;
			},

			// 计算歌词滚动位置，确保能看到当前行上下文
			calcLyricTranslate() {
				if (this.currentLyricIndex < 0) return 120; // 增加初始位置
				
				// 容器高度（根据是否展开而不同）
				const containerHeight = this.showLyric ? 440 : 240;
				
				// 每行高度
				const lineHeight = 70;
				
				// 计算当前行在中间的位置
				const middle = containerHeight / 2;
				
				// 计算偏移量，使当前行位于容器中间偏上的位置
				const offset = middle - (lineHeight / 2);
				
				// 最终的偏移量：使当前歌词行位于偏上位置，能看到更多下方歌词
				return offset - (this.currentLyricIndex * lineHeight);
			},

			// 获取歌曲名称
			getSongName(id) {
				// 如果有缓存，使用缓存
				if (this.songsCache[id]) {
					return this.songsCache[id].name;
				}
				
				// 如果是当前歌曲，使用当前信息
				if (id === this.songInfo?.id) {
					return this.songInfo.name;
				}
				
				// 否则返回默认值
				return '加载中...';
			},

			// 获取歌曲艺术家
			getSongArtist(id) {
				// 如果有缓存，使用缓存
				if (this.songsCache[id]) {
					return this.songsCache[id].artist;
				}
				
				// 如果是当前歌曲，使用当前信息
				if (id === this.songInfo?.id) {
					return this.formatArtists(this.songInfo.ar);
				}
				
				// 否则返回默认值
				return '未知艺术家';
			},

			// 播放指定索引的歌曲
			playSongAtIndex(index) {
				if (this.trackIds && this.trackIds.length > 0) {
					this.currentIndex = index;
					this.fetchSongData(this.trackIds[index]);
				}
			},

			// 切换播放列表抽屉状态
			togglePlaylistDrawer() {
				this.showPlaylistDrawer = !this.showPlaylistDrawer;
			},

			// 进度条触摸开始
			onProgressTouchStart(e) {
				this.isDragging = true;
				// 获取进度条宽度
				uni.createSelectorQuery().in(this).select('.progress-slider').boundingClientRect(rect => {
					if (rect) {
						this.progressSliderWidth = rect.width;
						this.progressSliderLeft = rect.left;
						this.updateProgressFromTouch(e);
					}
				}).exec();
			},

			// 进度条触摸移动
			onProgressTouchMove(e) {
				if (this.isDragging && this.progressSliderWidth) {
					this.updateProgressFromTouch(e);
				}
			},

			// 进度条触摸结束
			onProgressTouchEnd() {
				if (this.isDragging && this.innerAudioContext) {
					const duration = this.innerAudioContext.duration;
					const newTime = (this.progress / 100) * duration;
					this.innerAudioContext.seek(newTime);
				}
				this.isDragging = false;
			},

			// 根据触摸位置更新进度
			updateProgressFromTouch(e) {
				const touch = e.touches[0];
				const clientX = touch.clientX;
				const offsetX = clientX - this.progressSliderLeft;
				let newProgress = (offsetX / this.progressSliderWidth) * 100;
				newProgress = Math.max(0, Math.min(100, newProgress));
				this.progress = newProgress;
				if (this.innerAudioContext) {
					const duration = this.innerAudioContext.duration;
					const newTime = (newProgress / 100) * duration;
					this.currentTime = this.formatTime(newTime);
				}
			},
		}
	};
</script>

<style>
	/* 整体样式 */
	.music-player {
		display: flex;
		flex-direction: column;
		height: 100vh;
		background: linear-gradient(to bottom, #333, #111);
		color: white;
		position: relative;
		overflow: hidden;
	}

	/* 主内容区域 */
	.main-content {
		flex: 1;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		padding: 20rpx 0;
	}

	/* 专辑封面区域 */
	.album-container {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 40rpx 0;
		position: relative;
	}

	.album-cover .disc-bg {
		position: absolute;
		width: 110%;
		height: 110%;
		left: -5%;
		top: -5%;
		z-index: 1;
	}

	.needle {
		position: absolute;
		width: 300rpx;
		height: 300rpx;
		top: -50rpx;
		left: 60%;
		transform: translateX(-50%) rotate(-6deg);
		transform-origin: 25% 15%;
		z-index: 3;
		transition: transform 0.3s ease;
	}

	.needle.paused {
		transform: translateX(-50%) rotate(-30deg);
	}

	.album-cover {
		width: 460rpx;
		height: 460rpx;
		border-radius: 50%;
		overflow: hidden;
		border: 15rpx solid rgba(255, 255, 255, 0.1);
		box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.3);
		position: relative;
		transition: box-shadow 0.3s ease;
	}

	.album-cover image {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.play-icon {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 140rpx;
		height: 140rpx;
		background: rgba(0, 0, 0, 0.5);
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		color: white;
		opacity: 0.8;
		transition: opacity 0.3s ease;
	}

	.play-icon .iconfont {
		font-size: 60rpx;
	}

	.album-cover:not(.rotate-animation):hover .play-icon {
		opacity: 1;
	}

	/* 歌曲信息 */
	.song-info {
		text-align: center;
		padding: 15rpx 40rpx;
		margin-bottom: 15rpx;
	}

	.song-name {
		font-size: 40rpx;
		font-weight: 500;
		margin-bottom: 15rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.song-artist {
		font-size: 32rpx;
		color: rgba(255, 255, 255, 0.7);
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	/* 歌词区域 */
	.lyric-container {
		margin: 20rpx 40rpx;
		border-radius: 24rpx;
		background: transparent;
		backdrop-filter: blur(5rpx);
		border: none;
		overflow: hidden;
		transition: all 0.3s ease;
		height: 300rpx;
		box-sizing: border-box;
		box-shadow: none; /* 移除阴影 */
	}

	.lyric-header {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 15rpx 0;
		border-bottom: none;
		background: transparent;
	}

	.lyric-title {
		font-size: 32rpx;
		font-weight: 500;
		color: rgba(255, 255, 255, 0.9);
	}

	.fa-chevron-down {
		margin-left: 15rpx;
		font-size: 24rpx;
		transition: transform 0.3s ease;
	}

	.rotate-180 {
		transform: rotate(180deg);
	}

	.lyric-scroll-container {
		position: relative;
		width: 100%;
		overflow: hidden;
		background: transparent;
	}

	.lyric-content {
		position: absolute;
		width: 100%;
		left: 0;
		transition: transform 0.3s ease-out; /* 简化过渡效果，使其更加流畅 */
	}

	.lyric-line {
		height: 70rpx;
		line-height: 70rpx;
		font-size: 28rpx;
		padding: 0 40rpx;
		color: #CCCCCC;
		text-align: center;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
		font-weight: 400;
		transition: color 0.3s ease, font-size 0.3s ease;
	}

	.lyric-line.active {
		color: #FF3B30 !important;
		font-size: 34rpx;
		font-weight: 600;
	}

	.lyric-line.near-active {
		color: #FFFFFF;
		font-size: 30rpx;
	}

	/* 进度条 */
	.progress-container {
		padding: 0 40rpx;
		margin-bottom: 60rpx;
	}

	.progress-container,
	.progress-slider {
		display: flex;
		align-items: center;
	}

	.time-display {
		font-size: 28rpx;
		color: rgba(255, 255, 255, 0.7);
		width: 100rpx;
		text-align: center;
	}

	.progress-slider {
		flex: 1;
		height: 10rpx;
		margin: 0 20rpx;
		position: relative;
	}

	.progress-track {
		flex: 1;
		height: 100%;
		background: rgba(255, 255, 255, 0.2);
		border-radius: 5rpx;
	}

	.progress-fill {
		position: absolute;
		left: 0;
		top: 0;
		height: 100%;
		background: #C92027;
		border-radius: 5rpx;
		transition: width 0.1s linear;
	}

	.progress-thumb {
		position: absolute;
		left: 0;
		top: 50%;
		transform: translate(-50%, -50%);
		width: 30rpx;
		height: 30rpx;
		background: white;
		border-radius: 50%;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.3);
		transition: left 0.1s linear;
	}

	/* 控制按钮 */
	.control-container {
		display: flex;
		justify-content: space-around;
		align-items: center;
		padding: 0 60rpx;
		margin-bottom: 80rpx;
	}

	.control-btn {
		width: 80rpx;
		height: 80rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 36rpx;
		color: rgba(255, 255, 255, 0.7);
		transition: color 0.2s ease, transform 0.2s ease;
	}

	.control-btn:hover {
		color: white;
		transform: scale(1.1);
	}

	.control-btn.disabled {
		color: rgba(255, 255, 255, 0.3);
		pointer-events: none;
	}

	.control-btn.active {
		color: #C92027;
	}

	.control-btn .iconfont {
		font-size: 40rpx;
	}

	.play-btn {
		width: 120rpx;
		height: 120rpx;
		background: #C92027;
		border-radius: 50%;
		font-size: 48rpx;
		box-shadow: 0 10rpx 30rpx rgba(201, 32, 39, 0.4);
	}

	.play-btn .iconfont {
		font-size: 50rpx;
	}

	/* 播放列表按钮 */
	.playlist-btn {
		position: absolute;
		bottom: 40rpx;
		left: 50%;
		transform: translateX(-50%);
		display: flex;
		align-items: center;
		gap: 10rpx;
		padding: 15rpx 30rpx;
		background: rgba(255, 255, 255, 0.1);
		border-radius: 40rpx;
		backdrop-filter: blur(10rpx);
		font-size: 28rpx;
		color: rgba(255, 255, 255, 0.8);
		transition: all 0.2s ease;
	}

	.playlist-btn:hover {
		background: rgba(255, 255, 255, 0.2);
	}

	/* 加载状态 */
	.loading-mask {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.6);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 20;
	}

	.loading-spinner {
		width: 120rpx;
		height: 120rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 48rpx;
		color: #C92027;
	}

	/* 错误提示 */
	.error-message {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		padding: 30rpx 40rpx;
		background: rgba(255, 69, 0, 0.8);
		color: white;
		border-radius: 20rpx;
		font-size: 32rpx;
		text-align: center;
		z-index: 20;
	}

	/* 加载动画 */
	@keyframes spin {
		0% { transform: rotate(0deg); }
		100% { transform: rotate(360deg); }
	}

	.loading-spinner .iconfont {
		animation: spin 1s linear infinite;
		display: inline-block;
	}

	/* 播放列表抽屉 */
	.playlist-drawer {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 999;
		pointer-events: none;
		opacity: 0;
		transition: opacity 0.3s ease;
	}

	.playlist-drawer.show {
		opacity: 1;
		pointer-events: auto;
	}

	.playlist-mask {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.6);
		backdrop-filter: blur(3px);
	}

	.playlist-drawer-content {
		position: absolute;
		top: 0;
		right: 0;
		width: 80%;
		height: 100%;
		background: linear-gradient(to right, #222, #333);
		color: white;
		transform: translateX(100%);
		transition: transform 0.3s ease;
		box-shadow: -5px 0 15px rgba(0, 0, 0, 0.3);
		padding: 30rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
	}

	.playlist-drawer.show .playlist-drawer-content {
		transform: translateX(0);
	}

	.playlist-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid rgba(255, 255, 255, 0.1);
	}

	.playlist-title {
		font-size: 34rpx;
		font-weight: 500;
		color: white;
	}

	.close-btn {
		width: 60rpx;
		height: 60rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 50%;
	}

	.close-btn:active {
		background: rgba(255, 255, 255, 0.1);
	}

	.playlist-scroll {
		flex: 1;
		height: 0;
	}

	.playlist-item {
		display: flex;
		align-items: center;
		padding: 20rpx 0;
		border-bottom: 1rpx solid rgba(255, 255, 255, 0.05);
		position: relative;
		transition: all 0.2s ease;
	}

	.playlist-item:active {
		background: rgba(255, 255, 255, 0.05);
	}

	.playlist-item.current {
		color: #C92027;
	}

	.playlist-index {
		width: 60rpx;
		font-size: 28rpx;
		opacity: 0.7;
		text-align: center;
	}

	.playlist-song-info {
		flex: 1;
		padding: 0 20rpx;
		overflow: hidden;
	}

	.playlist-song-name {
		font-size: 30rpx;
		font-weight: 500;
		margin-bottom: 8rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.playlist-song-artist {
		font-size: 24rpx;
		opacity: 0.7;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.playing-indicator {
		width: 60rpx;
		height: 40rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.wave-animation {
		display: flex;
		justify-content: center;
		align-items: flex-end;
		height: 30rpx;
		width: 40rpx;
	}

	.wave-bar {
		width: 4rpx;
		height: 15rpx;
		margin: 0 2rpx;
		background: #C92027;
		animation: wave-animation 0.5s ease infinite alternate;
		border-radius: 3rpx;
	}

	.wave-bar:nth-child(1) {
		animation-delay: 0s;
	}

	.wave-bar:nth-child(2) {
		animation-delay: 0.2s;
		height: 25rpx;
	}

	.wave-bar:nth-child(3) {
		animation-delay: 0.4s;
	}

	@keyframes wave-animation {
		0% {
			height: 4rpx;
		}
		100% {
			height: 20rpx;
		}
	}


	/* 歌词滚动动画 */
	.lyric {
    	height: 246rpx;
    	line-height: 82rpx;
    	font-size: 32rpx;
   		text-align: center;
    	color: #949495;
    	overflow: hidden;
}
	.lyric .wrap {
    transition: .5s;
}
	.lyric .item {
    height: 82rpx;
}
	.lyric .active {
    color: rgb(255, 0, 0);
}

.lyric-fullscreen {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: #000;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
</style>